<!DOCTYPE html>
<html lang="en">

<head>
    @@include('meta.html')
    <title>个人中心</title>
    <style>
        body.hidden {
            min-width: 1640px;
            overflow-x: auto
        }
    </style>
</head>

<body class="hidden">
    @@include('header.html')

    @@include('user-center-banner.html')
    <div class="j-userCenter-tip clearfix">
        <div class="left clearfix j-menu-title">
            <span class="left titleText">个人中心</span><img src="images/icon/next.png" alt="" class="left title-ico">
            <ul class="left clearfix classify">
                <li>账单记录</li>
                <li>充币记录</li>
            </ul>
        </div>
    </div>
    <div class="j-userCenter-content">
        
        <div class="clearfix hidden">
            @@include('club-personal.html')
            <div class="y-content-r">
                
                <div class="clearfix y-location-r">
                    <span class="fl mr40">充币记录</span>
                    <div class="clearfix fl ml60">
                        <span class="fl mr10 font16">币种</span>
                        <div class="fl j-filterList">
                            <select class="j-select-box left">
                                <option class="j-option" value="1" selected>全部</option>
                                <option class="j-option" value="2">BTC</option>
                                <option class="j-option" value="3">ETH</option>
                                <option class="j-option" value="4">LTC</option>
                                <option class="j-option" value="5">BCC</option>
                            </select>
                            <div class="j-replace j-replace-width">  
                                <div class="j-current current-height">全部</div>  
                                <ul class="j-options options-width">  
                                    <li rel="1">全部</li>  
                                    <li rel="2">BTC</li>
                                    <li rel="3">ETH</li>
                                    <li rel="4">LTC</li>
                                    <li rel="5">BCC</li>
                                </ul>  
                            </div>  
                        </div>
                    </div>
                    <div class="clearfix fl ml20">
                        <div class="j-date-box">
                            <i class="j-date-ico"></i>
                            <input type="text" id="test1" >
                        </div>
                    </div>
                    <div class="right j-checkbox">
                        <label class="fl pointer mr20" for="status-all">
                            <input type="checkbox" id="status-all" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="font16">全部</span>
                        </label>
                        <label class="fl pointer mr20" for="status-success">
                            <input type="checkbox" id="status-success" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="font16">成功</span>
                        </label>
                        <label class="fl pointer mr20" for="status-fail">
                            <input type="checkbox" id="status-fail" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="font16">失败</span>
                        </label>
                        <label class="fl pointer mr20" for="status-doing">
                            <input type="checkbox" id="status-doing" class="y-pay-checkobox" onchange="payOrNot(this)">
                            <i class="y-checkbox y-check"></i>
                            <i class="y-checkbox y-checked none"></i>
                            <span class="font16 ">进行中</span>
                        </label>
                    </div>
                </div>
                <div class="j-userCenter-content-r">
                    <div class="y-scroll-height">
                        <div class="clearfix y-table-th border-b">
                            <div class="w10 fl text-l y-table-text">
                                币种
                            </div>
                            <div class="w20 fl text-c y-table-text">
                                时间
                            </div>
                            <div class="w10 fl text-c y-table-text">
                                金额
                            </div>
                            <div class="w10 fl text-c y-table-text">
                                确认次数
                            </div>
                            <div class="w40 fl text-c y-table-text">
                                TXID
                            </div>
                            <div class="w10 fl text-r y-table-text">
                                状态
                            </div>
                        </div>

                        <ul class="j-useCenter-ul">
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl w10">
                                    <img src="images/ETH.png" alt="" class="fl j-coinImg">
                                    <div class="fl ml10">
                                        <p class="j-trade-text">ETH</p>
                                    </div>
                                </div>
                                <div class="fl w20 text-c">
                                    <p class="j-trade-text">2018-07-10 16:25:52</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12.25000000</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12</p>
                                </div>
                                <div class="fl w40 text-c">
                                    <p class="j-trade-text">0x9bc67608bead315db90ee002ad62ad9751ab63ea<span class="j-trade-copy pointer marL10">复制</span></p>
                                </div>
                                <div class="fl w10 text-r">
                                    <img src="images/icon/finishIco.png" class="verifyStatus-img" alt="">
                                    <span class="j-trade-text">成功</span>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl w10">
                                    <img src="images/ETH.png" alt="" class="fl j-coinImg">
                                    <div class="fl ml10">
                                        <p class="j-trade-text">ETH</p>
                                    </div>
                                </div>
                                <div class="fl w20 text-c">
                                    <p class="j-trade-text">2018-07-10 16:25:52</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12.25000000</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12</p>
                                </div>
                                <div class="fl w40 text-c">
                                    <p class="j-trade-text">0x9bc67608bead315db90ee002ad62ad9751ab63ea<span class="j-trade-copy pointer marL10">复制</span></p>
                                </div>
                                <div class="fl w10 text-r">
                                    <img src="images/icon/onWayIco.png" class="verifyStatus-img" alt="">
                                    <span class="j-trade-text">进行中</span>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl w10">
                                    <img src="images/ETH.png" alt="" class="fl j-coinImg">
                                    <div class="fl ml10">
                                        <p class="j-trade-text">ETH</p>
                                    </div>
                                </div>
                                <div class="fl w20 text-c">
                                    <p class="j-trade-text">2018-07-10 16:25:52</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12.25000000</p>
                                </div>
                                <div class="fl w10 text-c">
                                    <p class="j-trade-text">12</p>
                                </div>
                                <div class="fl w40 text-c">
                                    <p class="j-trade-text">0x9bc67608bead315db90ee002ad62ad9751ab63ea<span class="j-trade-copy pointer marL10">复制</span></p>
                                </div>
                                <div class="fl w10 text-r">
                                    <img src="images/icon/failIco.png" class="verifyStatus-img" alt="">
                                    <span class="j-trade-text">失败</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @@include('footer-js.html')
    <script type="text/javascript" src="js/laydate/laydate.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            /*var lis = $(".addr-options li");

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function(e) {
                    e.stopPropagation();
                    $(this).parents('.addr-filterList').find('.addr-select-box').val(this.getAttribute("rel"));
                    $(this).parents(".addr-options").hide();
                    $(this).parents('.addr-replace').find(".addr-current").html($(this).find('.addr-value').html());
                    getSelectVal(this);
                }
            }
            $(".addr-replace").click(function(e) {
                e.stopPropagation();
                $(this).find(".addr-options").show();
            })
            $(":not(.addr-replace)").click(function() {
                $(this).find(".addr-options").hide();
            })*/

            var lis = $(".j-options li");

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function() {
                    $(this).parents('.j-filterList').find('.j-select-box').val(this.getAttribute("rel"));
                    $(this).parents(".j-options").hide();
                    $(this).parents('.j-replace').find(".j-current").html(this.innerHTML);
                    getSelectVal(this);
                }
            }
            $(".j-replace").mouseover(function() {
                $(this).find(".j-options").show();
            })
            $(".j-replace").mouseout(function() {
                $(this).find(".j-options").hide();
            })
            
        });
        function payOrNot(e) {
            if ($(e).is(':checked')) {
                $(e).siblings('.y-checked').removeClass('none');
                $(e).siblings('.y-check').addClass('none');
            } else {
                $(e).siblings('.y-checked').addClass('none');
                $(e).siblings('.y-check').removeClass('none');
            }
            console.log($(e).is(':checked'));
        }

        //执行一个laydate实例
        laydate.render({
          elem: '#test1'
          ,type: 'datetime'
          ,range: '-'
          ,format: 'yyyy/M/d'
          ,value: '2018/07/01 - 2018/12/31'
        }); 
    </script>
</body>

</html>